<template>
</template>
<script lang="ts">
import * as THREE from 'three'
import { EffectComposer, OrbitControls, RenderPass, UnrealBloomPass } from 'three/examples/jsm/Addons.js';
import Stats from 'three/examples/jsm/libs/stats.module.js';
import { GLTFLoader } from 'three/examples/jsm/Addons.js';

const scene = new THREE.Scene();


const width = 800;
const height = 800;
const camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
camera.position.set(0, 0, 200);
camera.lookAt(0, 0, 0);

const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);


const renderer = new THREE.WebGLRenderer({
    antialias: true,  // 开启抗锯齿
    powerPreference: "high-performance" // 可选：提升性能
});
renderer.setSize(width, height);
renderer.render(scene, camera);
document.body.appendChild(renderer.domElement);



const stats = new Stats;
stats.showPanel(0);
document.body.appendChild(stats.dom);
const controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', () => {
    stats.update();
    renderer.render(scene, camera);
})

// 2. 定义曲线路径（示例：正弦曲线）
const curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-10, 0, 0),
  new THREE.Vector3(-5, 5, 0),
  new THREE.Vector3(0, 0, 0),
  new THREE.Vector3(5, -5, 0),
  new THREE.Vector3(10, 0, 0)
]);

// 3. 从曲线获取点（分段数越多越平滑）
const points = curve.getPoints(500);

// 4. 创建几何体并设置顶点颜色（从红到蓝渐变）
const geometry = new THREE.BufferGeometry().setFromPoints(points);

console.log(geometry.attributes)

// 为每个顶点分配颜色
const colors = [];
for (let i = 0; i < points.length; i++) {
  const ratio = i / points.length;
  colors.push(ratio, 0, 1 - ratio); // R: 0→1, B: 1→0
}
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

// 5. 创建材质（启用顶点颜色）
const material = new THREE.LineBasicMaterial({ 
  vertexColors: true, // 关键：使用顶点颜色
  linewidth: 5        // 注意：大多数浏览器不支持实际宽度
});

// 6. 生成线对象并添加到场景
const line = new THREE.Line(geometry, material);
scene.add(line);


renderer.render(scene, camera);

</script>